<script setup>
	import {HomeFilled, Management, Promotion, Tools} from "@element-plus/icons-vue";
	//条目被点击后,调用的函数
	import {useRouter} from 'vue-router'
	import {ref} from 'vue'
	
	const router = useRouter();
	import {useUserInfoStore} from '@/store/userInfo.js'
	
	const userInfoStore = useUserInfoStore();
	const getUserInfo = () => {
		userApi.userInfo().then(result => {
			//数据存储在pinia中
			userInfoStore.setUserInfo(result.data)
		})
	}
	
	
	getUserInfo()
	
	const userLogin = ref({})
	userLogin.value = userInfoStore.user
	const loginUser = userInfoStore.user.role
	
	import {useTokenStore} from '@/store/token.js'
	import {noticeApi} from "@/api/notice.js";
	import {authApi} from "@/api/auth.js";
	import {userApi} from "@/api/user.js";
	
	//用户权限路径
	const authList=ref([])
	const auth = () => {
		authApi.selectByRole().then(result=>{
			// authList=result.data
			console.log(result.data)
		})
		authApi.selectByRole2().then(result=>{
			 authList.value=result.data
			console.log(authList.value)
		})
		
	}
	auth()
	const tokenStore = useTokenStore();
	
	//通知数量
	const informTotal = ref('')
	const total = () => {
		noticeApi.informTotal().then(result => {
			informTotal.value = result.data
		})
		// this.$children[0].$children[0].$forceUpdate()
	}
	total()
</script>

<template>
	<!-- 左侧菜单 -->
		<!-- element-plus的菜单标签 -->
		<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
				 router>
			<el-sub-menu v-for="item in authList" :key="item.id" :index="item.id" >
				<template #title>
					<el-icon>
						<HomeFilled/>
					</el-icon>
					<span>{{ item.name }}</span>
				</template>
				<el-menu-item v-for="oneAuth in (item.childrenAuth)" :key="oneAuth.id" :index="oneAuth.path">
					<span v-if="oneAuth.name !='公告通知'">{{ oneAuth.name }}</span>
					<el-badge v-if="oneAuth.name=='公告通知'" :value="informTotal" class="item" :offset="[5, 4]">
						<span>{{oneAuth.name}}</span>
					</el-badge>
				</el-menu-item>
			</el-sub-menu>
		</el-menu>
</template>

<style scoped>

</style>